<template>
	<div class="tpl29-showcase"
      :style="tplItemData.modulePadding || tplItemData.modulePadding ==0?'padding-top:'+tplItemData.modulePadding+'px;padding-bottom:'+tplItemData.modulePadding+'px;':'padding-top:5px;padding-bottom:5px;'" >
    <div class="showcase-layout">
      <!-- 2列 -->
      <section class="showcase-box col2" v-if="tplItemData.layout==0">
        <a @click="openLink(item.link)" :class="['con-img','img-'+(index+1)]" v-for="(item,index) in tplItemData.dataset" :key="index">
          <img :src="item.pic" alt="">
          <p class="info bdbox" v-if="item.showTitle==1">{{item.title}}</p>
        </a>
      </section>
      <!-- 3列 -->
       <scroll
            class="wrapper"
            ref="wrapper"
            :data="tplItemData.dataset"
            :startX="0"
            :click="true"
            :scrollX="true"
            :scrollY="false"
            :eventPassthrough="'vertical'"
          >
        <section class="showcase-box col3" v-if="tplItemData.layout==1">
          <a @click="openLink(item.link)" :class="['con-img','img-'+(index+1)]" v-for="(item,index) in tplItemData.dataset" :key="index">
            <div class="img-box">
              <img :src="item.pic" alt="">
            </div>
            <p class="info" v-if="item.showTitle==1">{{item.title}}</p>
          </a>
        </section>
      </scroll>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { openPage } from '@/utils/utils'
import Scroll from '@/components/scroll/index'

export default Vue.extend({
  name: 'index',
  components: {
    Scroll
  },
  props: {
    tplItemData: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  methods: {
    // TODO 小程序跳转
    openLink(link) {
        openPage(link)
    }
  }
})
</script>

<style lang="scss">
@import 'src/styles/mixin';
.tpl29-showcase{
  overflow: hidden;
  .showcase-box{
    overflow: hidden;
    .con-img{
      overflow: hidden;
    }
    .info{
      position:absolute;
      left:0;
      bottom:0;
      width:100%;
      padding-left:25px;
      color:#fff;
      // font-size:26px;
      // line-height:50px;
      z-index:1;
      box-sizing: border-box;
      @include lineClamp(26px,50px,1);
      display: block;
    }
    &.col2{
      position:relative;
      padding-top: 48.5%;
      .con-img{
        display: block;
        position:absolute;
        img{
          width: 100%;
          height:100%;
        } 
        &.img-1{
          top: 0;
          left: 0;
          height: 100%;
          width: 40%;
          &.lazyload-ph{
            background-size:contain;
          }
        }
        &.img-2{
          width: 60%;
          top: 0;
          right: 0;
          height: 49.33333%;
        }
        &.img-3{
          width: 30%;
          left: 40%;
          bottom: 0;
          height: 49.33333%;
        }
        &.img-4{
          width: 30%;
          right: 0;
          bottom: 0;
          height: 49.33333%;
        }
      }
      .info{
        @include gradient(right,rgba(242,18,40,0.9),rgba(242,18,40,0.1));
      }
    }
    &.col3{
      display: inline-block;
      white-space: nowrap;
      
      .con-img{
        display: inline-block;
        width:250px;
        position: relative;
        margin-right:20px;
        .img-box{
          position: relative;
          padding-top: 100%;
          overflow: hidden;
          img{
            position: absolute;
            top: 0;
            width: 100%;
            height: 100%;
          }
        }
        
        &:last-child{
          margin-right:0;
        }
        .info{
          background: rgba(0,0,0,0.5);
        }
      }
    }
  }
}

</style>
